<template>
  <div>
    <span>{{ parentMenu.title }}</span>
    <span v-if="resourceList.length === 0">无角色信息</span>
    <Tag v-else
         ref="roleTag"
         v-for="(item, index) in resourceList"
         :color="item.color"
         :key="item.roleId"
         :name="item.roleName"
         @click.native="handleCheck(item, index)"
         style="margin-left:10px;height: 28px;line-height: 28px;"
         :fade="false">{{ item.roleName }}
    </Tag>
  </div>
</template>

<script>
export default {
  name: 'roleTagPanel',
  data () {
    return {
      /* */
      checkable: false,
      resourceList: [],
      parentMenu: {}
    }
  },
  methods: {
    handleCheck (item, index) {
      if (this.$refs.roleTag[index].name === item.roleName) {
        // let param;
        if (this.resourceList[index].color === '#cca4e3') {
          /* 选中状态，改为未选中，并且展示菜单详情 */
          this.resourceList[index].color = 'default';
          // param = this.parentMenu;
        } else {
          /* 未选中状态，先选中然后展示详情，同时判断其他按钮是否选中，如选中则改为未选中状态 */
          this.resourceList.forEach((role, i) => {
            role.color = i === index ? '#cca4e3' : 'default';
          });
          // param = item;
        }
        // this.$emit('menuResourceChanged', param);
      }
    },
    getResources (roleList) {
      /* 获取菜单关联资源 */
      this.resourceList = roleList;
    },
    clearResourceTag () {
      /* 清空资源tag */
      const length = this.resourceList.length;
      // 清空reourceList数组
      this.resourceList.splice(0, length);
    }
  }
}
</script>
